<template>
  <div class="container">
    <div class="title">我的工作台（拖动可以排序）</div>
    <Draggable
      class="syllable_ul"
      element="ul"
      :list="data1"
      :options="{group:'title', animation:150}"
      :no-transition-on-drag="true"
      @change="change"
    >
      <!--      -->
      <transition-group type="transition" :name="!drag? 'syll_li' : null" :css="true">
        <li v-for="(item , index) in data1" :key="'idx'+index" class="listitem">
          <div>{{item.workBenchName}}</div>
          <div @click="Delete(index)">
            <img src="./../assets/images/workspace/delet.png" alt />
          </div>
        </li>
      </transition-group>
    </Draggable>

    <div class="title" style="margin-top:0.2rem">总工作台</div>
    <li v-for="(item , index) in data2" :key="'idx'+index" class="listitem">
      <div>{{item.workBenchName}}</div>
      <div @click="Add(index)">
        <img src="./../assets/images/workspace/add.png" alt />
      </div>
    </li>

    <div class="btn">
      <van-button type="default" class="submit" color="#DBB47F" @click="submit()">发 布</van-button>
    </div>
    <Loading v-if="LoadingShow"></Loading>
  </div>
</template>
<script>
import { Toast } from "vant";
import Draggable from "vuedraggable";
import Api from "./../api/api";
import Loading from './../components/Loading'
export default {
  components: {
    Draggable,
    Loading
  },
  data() {
    return {
      data1: [],
      data2: [],
      arr: [],
      drag: false,
      LoadingShow:true,
    };
  },
  methods: {
    change(evt) {
      let index = 0;
      let { data1, data2, arr } = this;
      arr = [];
      for (let i = 0; i < data1.length; i++) {
        index++;
        var obj = {};
        obj.id = data1[i].id;
        obj.sort = Number(i + 1);
        obj.delFlag = 0;
        arr.push(obj);
      }
      for (let i = 0; i < data2.length; i++) {
        index++;
        var obj = {};
        obj.id = data2[i].id;
        obj.sort = Number(index);
        obj.delFlag = 1;
        arr.push(obj);
      }

      this.arr = arr;
    },
    Delete(i) {
      let { data1, data2, arr } = this;
      arr = [];
      data1[i].delFlag = 1;
      data2.push(data1[i]);
      data1.splice(i, 1);
      console.log(data1)
    console.log(data2)

      let index = 0;
      for (let i = 0; i < data1.length; i++) {
        index++;
        var obj = {};
        obj.id = data1[i].id;

        obj.sort = Number(i + 1);
        obj.delFlag = 0;
        arr.push(obj);
      }
      for (let i = 0; i < data2.length; i++) {
        index++;
        var obj = {};
        obj.id = data2[i].id;
        obj.sort = Number(index);
        obj.delFlag = 1;
        arr.push(obj);
      }
       
      this.arr = arr;
    },
    Add(i) {
      let { data1, data2, arr } = this;
      arr = [];
      data2[i].delFlag = 0;
      data1.push(data2[i]);
      data2.splice(i, 1);

      let index = 0;
      for (let i = 0; i < data1.length; i++) {
        index++;
        var obj = {};
        obj.id = data1[i].id;
        obj.sort = Number(i + 1);
        obj.delFlag = 0;
        arr.push(obj);
      }
      for (let i = 0; i < data2.length; i++) {
        index++;
        var obj = {};
        obj.id = data2[i].id;
        obj.sort = Number(index);
        obj.delFlag = 1;
        arr.push(obj);
      }
      this.arr = arr;
    },
    getAll() {
      this.$axios
        .get(`${Api.HTTP.all}?employeeCode=${localStorage.getItem("employeeCode")}`)
        .then(res => {
           this.LoadingShow = false;
          let list = res.data.benchList;
          list.forEach(el => {
            if (el.delFlag == 0) {
              this.data1.push(el);
            } else {
              this.data2.push(el);
            }
          });
        })
        .catch(function(error) {
           Toast("网络错误");
           this.LoadingShow = false;
        });
    },

    submit() {
      const { arr } = this;
      console.log(this.arr);
     
      if (arr.length == 0) {
        Toast("暂无修改");
        return false;
      }

      this.$axios
        .post(Api.HTTP.update, {
          employeeCode: localStorage.getItem("employeeCode"),
          benchList: this.arr
        })
        .then(res => {
          console.log(res);
          if(res.data.success){
             Toast("修改成功");
            setTimeout(()=>{
              this.$router.go(-1);
            },1000);
          }else{
              Toast("修改失败");
          }
        })
        .catch(function(error) {
           Toast("网络错误");
        });
    }
  },
  mounted() {
    this.getAll();
        this.pubilcM.setTitle("工作台");
  }
};
</script>
<style scoped>
.container {
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  padding-bottom: 1.2rem;
  background: #f6f5f5;
  overflow: hidden;
  overflow-y: auto;
}
.title {
  padding: 0.3rem 0.25rem 0.3rem 0.25rem;

  color: #666666;
  font-size: 0.25rem;
}
.listitem {
  padding: 0.25rem;
  border-bottom: 1px solid #f5f5f5;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.listitem div:nth-child(2) {
  width: 0.3rem;
}
.listitem div:nth-child(2) img {
  width: 100%;
}
.btn {
  width: 100%;
  height: 1.2rem;
  padding: 0.2rem;
  box-sizing: border-box;
  background: #fff;
  position: fixed;
  bottom: 0;
}
.submit {
  width: 100%;
  height: 100%;
}
</style>